import React, { useState } from "react";
import { Link, Routes, Route } from "react-router-dom";
import { Layout, Menu} from 'antd';

import "./startPage.scss";
import appRouter, { IRouter } from "../router/appRouter"

import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
} from '@ant-design/icons';

const { SubMenu } = Menu;
const { Header, Content, Footer, Sider } = Layout;

function App() {
  const [collapse, setCollapse] = useState<boolean>(false);
  return (
      <Layout hasSider className="outer_layout">
        <Sider className="sider" collapsible trigger={null} collapsed={collapse}>
          <div className="logo" />
          <Menu theme="dark" mode="inline" >
            {
              appRouter.map((r: IRouter) => {
                if (r.children) {
                  return (
                    <SubMenu key={`menu${r.id}`} title={r.title}>
                      {
                        r.children.map((r_child: IRouter) => {
                          return (
                            <Menu.Item key={`menu${r_child.id}`}>
                              <Link key={`link${r_child.id}`} to={`${r.path}/${r_child.path}`}>{r_child.title}</Link>
                            </Menu.Item>
                          )
                        })
                      }
                    </SubMenu>
                  )
                } else {
                  return (
                    <Menu.Item key={`menu${r.id}`}>
                      <Link key={`link${r.id}`}  to={r.path}>{r.title}</Link>
                    </Menu.Item>
                  )
                }
              })
            }
          </Menu>
        </Sider>
        <Layout className="site-layout" >
          <Header className="site-layout-background site-header">
            {React.createElement(collapse ? MenuUnfoldOutlined : MenuFoldOutlined, {
              className: 'trigger',
              onClick: () => { setCollapse(!collapse) }
            })}
          </Header>
          <Content className="site-content">
            <div className="site-layout-background content-div" >
            
              <Routes>
                {
                  appRouter.map((r:IRouter)=>{
                    if(r.children){
                      return (
                        <Route key={r.id} path={`${r.path}/*`} element={r.component}>
                          {r.children.map((r_child:IRouter)=>{
                            return (
                              <Route key={r_child.id} path={r_child.path} element={r_child.component} />
                            )
                          })}
                        </Route>
                      )
                    }else{
                      return <Route key={r.id} path={r.path} element={r.component}/>
                    }
                  })
                }
              </Routes>
              
            </div>
          </Content>
          <Footer className="site-footer">Ant Design ©2018 Created by Ant UED</Footer>
        </Layout>
      </Layout>
  );
}

export default App;
